<template>
    <div class="box">
        <h3>没有模块化使用</h3>
        <div>state</div>
        <div>普通使用: {{ $store.state.msg }}</div>
        <div>辅助函数: {{ msg }}</div>
        <div>getters</div>
        <div>普通使用: {{ $store.getters.allMsg }}</div>
        <div>辅助函数: {{ allMsg }}</div>
        <button @click="changeMsg">修改state中数据</button>
    </div>
</template>

<script>
import { mapState, mapActions, mapMutations, mapGetters } from 'vuex'
export default {
    name: "Child1",
    computed: {
        ...mapState(['msg']),
        ...mapGetters(['allMsg'])
    },
    methods: {
        ...mapActions(['changeMessage']),
        ...mapMutations(['SET_MSG']),
        changeMsg() {
            // 通过actions
            // 普通使用
            // this.$store.dispatch('changeMessage', '你不配')
            // 辅助函数使用
            this.changeMessage('我们不合适')

            // 通过mutations
            // 普通使用
            // this.$store.commit('SET_MSG', '你不配')
            // 辅助函数使用
            // this.SET_MSG('我们不合适')
        }
    }
};
</script>

<style scoped>
</style>
